<template>
  <div>
    <el-table :data="getRoleByPage" style="width: 100%">
      <el-table-column prop="roleNum" label="编号" width="180">
      </el-table-column>
      <el-table-column prop="roleName" label="项目角色名" width="180">
      </el-table-column>
      <el-table-column prop="roleState" label="状态" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-link icon="el-icon-edit" @click="changerole(scope.row.roleNum)" type="primary">修改</el-link>
          <el-link icon="el-icon-edit" @click="delrole(scope.row.roleNum)" type="primary">删除</el-link>
          <el-link icon="el-icon-edit" @click="manage(scope.row.roleNum)" type="primary">权限管理</el-link>
          <el-link icon="el-icon-edit" type="primary" @click="closeRole(scope.row.roleNum)">
            {{scope.row.roleState=='有效'?'禁用':'启用'}}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination fixed @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pages.current"
      :page-sizes="[1, 2, 3, 4]" :page-size="pages.size" layout="total, sizes, prev, pager, next, jumper" :total="pages.total">
    </el-pagination>

    <el-dialog title="修改角色" :visible.sync="dialogVisible" width="30%">
      <el-form>
        <el-input type="text" placeholder="角色名" v-model="changeRoleName"></el-input>
        <!-- <textarea cols="48" rows="2" placeholder="项目描述" v-model="addprojectinfo.projectDesc"></textarea> -->


      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogVisible2" width="30%">
      <el-tree ref="menusTree" :data="menus" show-checkbox 
			node-key="menuId" :default-checked-keys="checked" :props="defaultProps">
      </el-tree>

      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="cancle">取 消</el-button> -->
        <el-button type="primary" @click="surechange()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "rolemanagement",
    data() {
      return {
        getRoleByPage: [],
        pages: {},
        changeRoleName: "",
        "rid": 0,
        dialogVisible: false,
        menus: [],
        dialogVisible: false,
         dialogVisible2: false,
        defaultProps: {
          children: 'children',
          label: 'menuName'
        },
        checked: [],
        indexId:0
      }
    },
    methods: {
      getAllRoleByPage(current, size) {
        this.$http.post("/role/getAllRoleByPage", {
          "current": current,
          "size": size
        }).then(resp => {
          this.getRoleByPage = resp.data.data.records
          this.pages = resp.data.data
        })
      },
      handleSizeChange(val) {

        this.pages.size = val
        this.getAllRoleByPage(this.pages.num, val)
      },
      handleCurrentChange(val) {
        this.pages.current = val
        this.getAllRoleByPage(val, this.pages.size)
      },
      closeRole(rid) {
        this.$http.get("role/closeRole", {
          params: {
            "roleNum": rid
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: resp.data.message,
              type: 'success'
            })
          } else {
            this.$message.error(resp.data.message)
          }
          this.getAllRoleByPage(1, 2)
        })
      },
      changerole(rid) {

        this.rid = rid
        this.$http.get("role/checkRoleState", {
          params: {
            "roleNum": rid
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.dialogVisible = true
          } else {
            this.$message.error(resp.data.message)
          }
        })
      },
      sure() {
        this.$http.get("role/changeRoleName", {
          params: {
            "roleNum": this.rid,
            "roleName": this.changeRoleName
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: resp.data.message,
              type: 'success'
            })
            this.getAllRoleByPage()
            this.dialogVisible = false
            this.changeRoleName = null
          } else {
            this.$message.error(resp.data.message)
            this.changeRoleName = null
          }
        })
      },
      delrole(rid) {
        this.$http.get("role/delRole", {
          params: {
            "roleNum": rid
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: resp.data.message,
              type: 'success'
            })
          } else {
            this.$message.error(resp.data.message)
          }
        })
      },
      manage(rid){
        this.indexId=rid
        this.$http.get("menus/getMenusByRoleNum",{
          params:{
            "roleNum":rid
          }
        }).then(resp=>{
          this.checked=resp.data.data
        })

        this.$http.get("menus/getAllMenus").then(resp=>{
          this.menus=resp.data.data
        })
        this.dialogVisible2=true
      },
      surechange(){
		  
        let menutree=this.$refs.menusTree.getCheckedNodes(false,false)
        this.menusId=menutree.map(node => node.menuId)
        this.$http.post("menus/saveMenus",{"roleNum":this.indexId,
                                   "menusId":this.menusId
            }).then(resp=>{
             if(resp.data.code==200){
               this.$message({
                 message:resp.data.message,
                 type:'success'
               })
             }
                  this.dialogVisible2=false
        })
      }
      // changerole(rid){
      //   this.$http.get("role/changeRoleState",{
      //     params:{
      //       "roleNum":rid
      //     }
      //   }).then(resp=>{
      //     if(resp.data.code==200){
      //       this.$message({
      //                 message: resp.data.message,
      //                 type: 'success'
      //               })
      //     }
      //     else{
      //       this.$message.error(resp.data.message)
      //     }
      // })
      // }
    },
    created() {
      this.getAllRoleByPage(1, 2)
    }

  }
</script>

<style>
</style>
